<template>
  <view class="content" :style="[styles]">
    <text class="title" :style="{color:attribute.titleColor}">{{attribute.title}}</text>
    <span class="red-dot" v-if="attribute.required">*</span>
    <view class="select-area">
      <view class="select-body" @click="handleClick">
        <u--text color="#131313" size="14" v-if="attribute.value" :text="attribute.value"></u--text>
        <u--text color="#B7B7B7" size="14" v-else :text="attribute.placeholder"></u--text>
        <u-icon color="#b1b1b1" name="arrow-down" />
      </view>
      <u-datetime-picker :formatter="formatter" :show="show" v-model="defaultValue" @cancel="hidePopup"
        @close="hidePopup" @confirm="handleConfirm" :minDate="attribute.minDate" :maxDate="attribute.maxDate"
        :mode="attribute.mode">
      </u-datetime-picker>
    </view>
    <view class="input-rule-text" v-if="requiredFail">{{attribute.requiredText}}</view>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";

export default {
  name: `${COMPREIFX}cus-datetime-picker`,
  props: {
    attribute: Object,
    styles: Object,
  },
  data() {
    return {
      show: false,
      defaultValue: null,
      requiredFail: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.setDefaultValue()
      this.setRangeDate()
    },
    setRangeDate() {
      const TenYearMs = 10 * 365 * 24 * 3600000
      const nowDateMs = this.defaultValue
      if (!this.attribute.minDate) {
        this.attribute.minDate = nowDateMs - TenYearMs
      }
      if (!this.attribute.maxDate) {
        this.attribute.maxDate = nowDateMs + TenYearMs
      }
    },
    setDefaultValue() {
      const nowTimeStamp = Number(new Date())
      const nowTimeStr = this.$u.timeFormat(nowTimeStamp, 'hh:mm')
      this.defaultValue = this.attribute.mode !== 'time' ? nowTimeStamp : nowTimeStr
    },
    hidePopup() {
      this.show = false
    },
    handleConfirm(e) {
      this.show = false
      this.defaultValue = this.result(e.value, e.mode)
      this.attribute.value = this.defaultValue
      this.requiredFail = false
    },
    result(time, mode) {
      const timeFormat = uni.$u.timeFormat
      switch (mode) {
        case 'datetime':
          return timeFormat(time, 'yyyy/mm/dd hh:MM')
        case 'date':
          return timeFormat(time, 'yyyy/mm/dd')
        case 'year-month':
          return timeFormat(time, 'yyyy/mm')
        case 'time':
          return time
        default:
          return ''
      }
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          if (this.attribute.required && !!!this.attribute.value) {
            this.requiredFail = true
            resolve(this.attribute.requiredText)
            return false;
          }
          this.requiredFail = false
          resolve()
        })

      })
    },
    formatter(type, value) {
      const TypeSet = {
        year: '年',
        month: '月',
        day: '日',
        hour: '时',
        minute: '分'
      }
      return value + TypeSet[type]
    },
    handleClick() {
      this.show = true
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 15rpx 20rpx;
}

.title {
  color: #333;
  font-size: 28rpx;
}

.red-dot {
  color: rgb(245, 39, 39);
  margin-left: 5rpx;
}

.select-area {
  margin-top: 22rpx;

  .select-body {
    width: 100%;
    height: 62rpx;
    box-sizing: border-box;
    border: 1rpx #CACACA solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18rpx;
  }
}

.input-rule-text {
  color: #F05357;
  font-size: 24rpx;
  padding: 15rpx 18rpx;
}
</style>
